<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>stroke-dashoffset</title>
</head>

<body>
    <div class="github">
        <a href="https://github.com/zhansingsong/svg-tutorials" class="github-corner"
            aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
                style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
                aria-hidden="true">
                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                <path
                    d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                    fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                <path
                    d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                    fill="currentColor" class="octo-body"></path>
            </svg></a>
        <style>
            .github-corner:hover .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }

            @keyframes octocat-wave {

                0%,
                100% {
                    transform: rotate(0)
                }

                20%,
                60% {
                    transform: rotate(-25deg)
                }

                40%,
                80% {
                    transform: rotate(10deg)
                }
            }

            @media (max-width:500px) {
                .github-corner:hover .octo-arm {
                    animation: none
                }

                .github-corner .octo-arm {
                    animation: octocat-wave 560ms ease-in-out
                }
            }
        </style>
    </div>
  <style>
    .demo{
      position: relative;
      width: 1000px;
      height: 1000px;
    }
    .controls {
      position: absolute;
      top: 490px;
      right: 240px;
    }

    .controls .r1 {
      color: #E91E63;
    }

    .controls .r2,
    .controls .r3 {
      color: #4e85df;
    }

    .controls span {
      display: inline-block;
      width: 40px;
      vertical-align: top;
      font-weight: 700;
    }

    .controls table {
      text-align: right;
    }

    svg {
      background-color: rgb(245, 245, 245);
      box-shadow: 1px 1px 8px #00000045;
    }

    input[type="range"] {
      width: 400px;
    }
  </style>
  <div class="demo">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000">
<!-- 
      <line class="bg1" x1="130" y1="10" x2="130" y2="1000" stroke="#ececec" stroke-width="60" stroke-dasharray="100"
        stroke-dashoffset="0" />
      <line class="bg2" x1="130" y1="10" x2="130" y2="1000" stroke="#E0E0E0" stroke-width="60" stroke-dasharray="100"
        stroke-dashoffset="100" />
      <g>
        <rect x="100" y="10" width="300" height="200" fill="none" stroke="#E91E63" stroke-dasharray="10"></rect>
        <text x="260" y="40" style="font-size: 26px;font-weight: 700;fill: #E91E63;">dashoffset</text>
      </g>
      <g>
        <rect x="100" y="210" width="300" height="1000" fill="none" stroke="#4e85df" stroke-dasharray="10"></rect>
        <text x="260" y="240" style="font-size: 26px;font-weight: 700;fill: #4e85df;">dasharray</text>
      </g>
      <line class="up" x1="130" y1="10" x2="130" y2="210" stroke="#880E4F" stroke-width="20" stroke-dasharray="100"
        stroke-dashoffset="100" />
      <line class="mask-up" x1="130" y1="10" x2="130" y2="210" stroke="#f5f5f5" stroke-width="60" stroke-dasharray="200"
        stroke-dashoffset="0" />
      <line class="offset" x1="130" y1="210" x2="130" y2="1000" stroke="#D81B60" stroke-width="20" stroke-dasharray="100"
        stroke-dashoffset="0" /> -->
      <g style="transform: translate(-20%, 25%);">
        <line class="dasharray1" x1="500" y1="100" x2="900" y2="100" stroke="#BBDEFB" stroke-width="60"/>
        <line class="dasharray" x1="500" y1="100" x2="900" y2="100" stroke="#03A9F4" stroke-width="60" stroke-dasharray="100"
          stroke-dashoffset="100" />
      </g>
    </svg>
    <div class="controls">
      <table>
        <tbody>
          <!-- <tr class="r1">
            <td width="110">dashoffset:</td>
            <td width="400"><input class="range1" type="range" name="value" min="-200" max="200" step="10"></td>
            <td width="50" class="txt1">0</td>
          </tr> -->
          <tr class="r2">
            <td width="140">dasharray-value1:</td>
            <td width="400"><input class="range2" type="range" name="value" min="0" max="200" step="10"></td>
            <td class="txt2" width="50">0</td>
          </tr>
          <tr class="r3">
            <td>dasharray-value2:</td>
            <td><input class="range3" type="range" name="value" min="0" max="200" step="10"></td>
            <td class="txt3">0</td>
          </tr>
          <!-- <tr class="r3">
            <td>dasharray-value3:</td>
            <td><input class="range4" type="range" name="value" min="0" max="200" step="10"></td>
            <td class="txt4">0</td>
          </tr> -->
        </tbody>
      </table>
      <!-- <div class="r1">
            dashoffset: <input class="js-range" type="range" name="value" min="-200" max="200" step="10" ><span style="margin-left: 10px;" class="txt"></span> 
        </div>
        <div class="r2">
            dasharray-v1: <input class="js-range" type="range" name="value" min="-200" max="200" step="10" ><span style="margin-left: 10px;" class="txt"></span> 
        </div>
        <div class="r3">
            dasharray-v2: <input class="js-range" type="range" name="value" min="-200" max="200" step="10" ><span style="margin-left: 10px;" class="txt"></span> 
        </div> -->
    </div>
  </div>

  <script>
    // const bg1 = document.querySelector('.bg1');
    // const bg2 = document.querySelector('.bg2');
    // const range1 = document.querySelector('.range1');
    const range2 = document.querySelector('.range2');
    const range3 = document.querySelector('.range3');
    // const range4 = document.querySelector('.range4');
    const offset = document.querySelector('.offset');
    const up = document.querySelector('.up');
    const maskUp = document.querySelector('.mask-up');
    // const txt1 = document.querySelector('.txt1');
    const txt2 = document.querySelector('.txt2');
    const txt3 = document.querySelector('.txt3');
    // const txt4 = document.querySelector('.txt4');
    const dasharray = document.querySelector('.dasharray');
    // txt1.innerHTML = range1.value;
    txt2.innerHTML = range2.value;
    txt3.innerHTML = range3.value;
    // txt4.innerHTML = range4.value;
    // range1.addEventListener('input', (e) => {
    //   const target = e.target;
    //   const value = target.value;
    //   txt1.innerHTML = value;
    //   offset.style.strokeDashoffset = value
    //   up.style.strokeDashoffset = value
    //   maskUp.style.strokeDashoffset = Math.abs(value)
    // });
    range2.addEventListener('input', (e) => {
      const target = e.target;
      const value = target.value;
      txt2.innerHTML = value;
      range3.value = target.value;
      txt3.innerHTML = value;
      // range4.value = target.value;
      // txt4.innerHTML = value;
      dasharray.style.strokeDasharray = value
      dasharray.style.strokeDashoffset = 0
    });
    range3.addEventListener('input', (e) => {
      const target = e.target;
      const value = target.value;
      txt3.innerHTML = value;
      dasharray.style.strokeDasharray = [range2.value,value].join(',');
      dasharray.style.strokeDashoffset = 0
    });
    // range4.addEventListener('input', (e) => {
    //   const target = e.target;
    //   const value = target.value;
    //   txt4.innerHTML = value;
    //   dasharray.style.strokeDasharray = [range2.value,range3.value,value].join(',');
    //   dasharray.style.strokeDashoffset = 0
    // });
  </script>
</body>

</html>